
<template>
  <div class="tabs-bar">
    <div :class="[this.tabId === 1 ? 'active': '']" @click="handleChangeTab(1)">正在热映</div>
    <div :class="[this.tabId === 2 ? 'active': '']" @click="handleChangeTab(2)">即将上映</div>
    <div class="tab-ink-bar-wrapper" :style="{ transform: this.tabId === 1 ? 'translate3d(0%, 0px, 0px)': ' translate3d(100%, 0px, 0px)'}">
      <span class="tab-ink-bar"></span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabId: 1
    }
  },
  methods: {
    handleChangeTab (num) {
      if (num === this.tabId) return
      this.tabId = num
      if (num === 1) {
        // if(this.$route.patch !== '/films/nowplaying') {
        this.$router.push('/films/nowplaying')
        // }
      } else if (num === 2) {
        //  if(this.$route.patch !== '/films/comingsoon') {
        this.$router.push('/films/comingsoon')
        // }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";

.tabs-bar {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  text-align: center;
  background-color: #fff;
  font-size: .14rem;
  @include border-b-1px(#ededed);
  z-index: 100;
}
.tab-ink-bar-wrapper {
  position: absolute;
  // transform: translate3d(0%, 0px, 0px);
  width: 50%;
  margin: auto;
  // top: 30px;
  bottom: 0;
  left: 0;
  transition: transform .2s cubic-bezier(.35,0,.25,1),-webkit-transform .2s cubic-bezier(.35,0,.25,1);
  .tab-ink-bar {
    width: .56rem;
    border-bottom: 2px solid #ff5f16;
    border-radius: 20px;
    display: block;
    margin: auto;
  }
}
.active {
  color: #ff5f16;
}
</style>
